<template>
  <div class="qualityMonitoringList">
    <div>
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="110px"
      >
        <el-form-item label="温度计所属区域">
          <el-select
            v-model="formInline.area_id"
            filterable
            placeholder="请选择运单出发区域"
            style="width: 200px; padding: 0px 8px 0px 0px"
          >
            <el-option
              v-for="(item, index) in websiteList"
              :key="index"
              :value="item.id + ''"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="运单始发区域">
                    <el-select v-model="formInline.waybill_from_area_id" filterable placeholder="请选择运单出发区域"
                        style="width: 200px; padding: 0px 8px 0px 0px">
                        <el-option v-for="(item, index) in websiteList" :key="index" :value="item.id+''"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="运单目的区域">
                    <el-select v-model="formInline.waybill_to_area_id" filterable placeholder="请选择运单出发区域"
                        style="width: 200px; padding: 0px 8px 0px 0px">
                        <el-option v-for="(item, index) in websiteList" :key="index" :value="item.id+''"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item> -->
        <el-form-item label="温度计编号">
          <el-input
            v-model="formInline.thermometer_no"
            placeholder="温度计编号"
            style="width: 110%"
          ></el-input>
        </el-form-item>
        <el-form-item label="使用状态">
          <el-select
            v-model="formInline.usage_status"
            placeholder="活动区域"
            style="width: 200px; padding: 0px 8px 0px 0px"
          >
            <el-option label="正常" value="0"></el-option>
            <el-option label="在途" value="1"></el-option>
            <el-option label="异常" value="2"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="盯控状态">
          <el-select
            v-model="formInline.monitor_status"
            placeholder="活动区域"
            style="width: 200px; padding: 0px 8px 0px 0px"
          >
            <el-option label="使用中" value="0"></el-option>
            <el-option label="待使用" value="1"></el-option>
            <el-option label="客户使用中" value="2"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="异常原因">
          <el-input
            v-model="formInline.abnormal_reason"
            placeholder="异常原因"
            style="width: 120%"
          ></el-input>
        </el-form-item>
        <el-form-item label="定位时间">
          <el-date-picker
            v-model="position_time_list"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="异常处理时间">
          <el-date-picker
            v-model="handler_time_list"
            :default-time="['00:00:00', '23:59:59']"
            type="daterange"
            range-separator="至"
            start-placeholder="开 始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="异常发生时间">
          <el-date-picker
            v-model="happen_time_list"
            :default-time="['00:00:00', '23:59:59']"
            type="daterange"
            range-separator="至"
            start-placeholder="开 始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div style="margin: 0px 0px 10px 0px">
        <el-button type="primary" @click="thermometermonitorObjTwo()"
          >查询</el-button
        >
        <el-button type="primary" @click="replacement()">重置</el-button>
        <el-button type="primary" @click="deriverdata()">导出</el-button>
        <el-button type="primary" @click="importData()">导入</el-button>
        <div style="float: right">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="ALLtotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :max-height="maxheight"
      >
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column prop="thermometer_no" label="温度计编号" width="120">
        </el-table-column>
        <el-table-column prop="usage_status_name" label="使用状态" width="80">
        </el-table-column>
        <el-table-column prop="area_name" label="排查大区" width="120">
        </el-table-column>
        <el-table-column prop="power" label="电量" width="60">
        </el-table-column>
        <el-table-column prop="position_city" label="定位城市">
        </el-table-column>
        <el-table-column prop="position_time" label="定位时间" width="150">
        </el-table-column>
        <el-table-column
          prop="position_address"
          label="定位详细地址"
          width="150"
        >
        </el-table-column>
        <el-table-column prop="waybill_no" label="运单号" width="120">
        </el-table-column>
        <el-table-column
          prop="waybill_from_area_name"
          label="运单始发区域"
          width="180"
        >
        </el-table-column>

        <el-table-column
          prop="waybill_to_area_name"
          label="运单目的区域"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="waybill_sender_city_name"
          label="运单发货城市"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="waybill_receiver_city_name"
          label="运单收货城市"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="waybill_box_status_name
        " label="运单回箱状态" width="180">
        </el-table-column>
        <el-table-column prop="abnormal_time" label="异常发生时间" width="180">
        </el-table-column>
        <el-table-column prop="abnormal_reason" label="异常原因" width="180">
        </el-table-column>
        <!-- <el-table-column
          prop="abnormal_time"
          label="异常发生时间"
          width="180"
        ></el-table-column> -->
        <el-table-column
          prop="handler_user_name"
          label="处理异常员工"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="handler_time"
          label="处理异常时间"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="handler_result"
          label="异常处理结果"
          width="180"
        ></el-table-column>
        <!-- <el-table-column
          prop="monitor_status_name"
          label="盯控状态"
          width="180"
        ></el-table-column> -->
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.usage_status == 2">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >受理</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <ImportComponent
        :drawerCollectData="drawerCollectFlagShow"
        @drawerCollectShow="drawerCollectFlagShowFn"
      >
      </ImportComponent>
    </div>
    <div>
      <el-dialog title="受理" :visible.sync="dialogVisible" width="50%">
        <el-form label-position="right" label-width="80px" :model="fromdata">
          <el-form-item label="受理方案">
            <el-input
              v-model="fromdata.handler_result"
              type="textarea"
              :rows="7"
            ></el-input>
          </el-form-item>
          <el-form-item label="受理时间">
            <el-date-picker
              v-model="fromdata.handler_time"
              type="datetime"
              placeholder="选择日期时间"
              :clearable="false"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleAcceptanceClick()"
            >受理</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  branchList,
  thermometermonitor,
  thermometermonitorexport,
  thermometermonitorabnormaldeal,
} from "@/api/Largewidthmeterlist";
import { downloadFile } from "@/page/material/common/common";
import ImportComponent from "@/components/ImportComponent/ImportComponent";
export default {
  name: "qualityMonitoringList",
  data() {
    return {
      formInline: {
        area_id: "", //温度计所属区域
        waybill_from_area_id: "", //运单始发区域
        waybill_to_area_id: "", //运单目的区域
        thermometer_no: "", //温度计编号
        usage_status: "", //状态
        abnormal_reason: "", //异常原因
        ownership_type: "1",
        position_time: {
          start_time: "",
          end_time: "",
        },
        handler_time: {
          start_time: "",
          end_time: "",
        },
        abnormal_time: {
          start_time: "",
          end_time: "",
        },
        monitor_status: "",
      },
      tableData: [],
      maxheight: "auto",
      websiteList: [],
      ALLtotal: 0,
      currentPage4: 1,
      page: 1,
      page_size: 20,
      drawerCollectFlagShow: false,
      position_time_list: [],
      handler_time_list: [],
      dialogVisible: false,
      fromdata: {
        thermometer_ids: [],
        handler_time: new Date(),
        handler_result: "",
      },
      happen_time_list: [],
    };
  },
  components: { ImportComponent },
  mounted() {
    if (this.$route.query) {
      this.formInline.area_id = this.$route.query.area_id;
      this.formInline.usage_status = this.$route.query.usage_status;
      this.formInline.ownership_type = this.$route.query.rental_cnt;
      this.thermometermonitorObj();
    } else {
      this.thermometermonitorObj();
    }
    this.getWebsiteList();
  },
  methods: {
    async getWebsiteList() {
      let result = await branchList({ branch_type: "3", is_head: "1" });
      this.websiteList = result.data;
    },
    thermometermonitorObjTwo() {
      this.page = 1;
      this.page_size = 20;
      this.thermometermonitorObj();
      this.currentPage4 = 1;
    },
    thermometermonitorObj() {
      // console.log(this.position_time_list, "position_time_list");
      var param = {
        ...this.formInline,
        position_time: {
          start_time:
            this.position_time_list.length != 0
              ? this.position_time_list[0] / 1000 + ""
              : "",
          end_time:
            this.position_time_list.length != 0
              ? this.position_time_list[1] / 1000 + ""
              : "",
        },
        handler_time: {
          start_time:
            this.handler_time_list.length != 0
              ? this.handler_time_list[0] / 1000 + ""
              : "",
          end_time:
            this.handler_time_list.length != 0
              ? this.handler_time_list[1] / 1000 + ""
              : "",
        },
        abnormal_time: {
          start_time:
            this.happen_time_list.length != 0
              ? this.happen_time_list[0] / 1000 + ""
              : "",
          end_time:
            this.happen_time_list.length != 0
              ? this.happen_time_list[1] / 1000 + ""
              : "",
        },
        page: this.page,
        page_size: this.page_size,
      };
      thermometermonitor(param).then((res) => {
        if (res.code == 10000) {
          this.tableData = res.data.data;
          if (this.tableData.length > 4) {
            //两排操作栏
            this.maxheight = document.documentElement.clientHeight - 335;
          } else {
            this.maxheight = "auto";
          }

          this.ALLtotal = res.data.total;
          this.page = res.data.page * 1;
          this.page_size = res.data.page_size * 1;
        }
      });
    },
    replacement() {
      Object.assign(this.$data.formInline, this.$options.data().formInline);
      this.page = 1;
      this.page_size = 20;
      this.position_time_list = [];
      this.handler_time_list = [];
      this.happen_time_list = [];
      this.thermometermonitorObj();
      this.currentPage4 = 1;
    },
    handleSizeChange(val) {
      this.page_size = val;
      this.thermometermonitorObj();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.thermometermonitorObj();
      // console.log(`当前页: ${val}`);
    },
    deriverdata() {
      var param = {
        ...this.formInline,
        position_time: {
          start_time:
            this.position_time_list.length != 0
              ? this.position_time_list[0] / 1000 + ""
              : "",
          end_time:
            this.position_time_list.length != 0
              ? this.position_time_list[1] / 1000 + ""
              : "",
        },
        handler_time: {
          start_time:
            this.handler_time_list.length != 0
              ? this.handler_time_list[0] / 1000 + ""
              : "",
          end_time:
            this.handler_time_list.length != 0
              ? this.handler_time_list[1] / 1000 + ""
              : "",
        },
        abnormal_time: {
          start_time:
            this.happen_time_list.length != 0
              ? this.happen_time_list[0] / 1000 + ""
              : "",
          end_time:
            this.happen_time_list.length != 0
              ? this.happen_time_list[1] / 1000 + ""
              : "",
        },
      };
      thermometermonitorexport(param).then((res) => {
        this.reqUrl = "https://" + res.data.loaded_url;
        window.open(this.reqUrl);
      });
    },
    importData() {
      this.drawerCollectFlagShow = true;
    },
    drawerCollectFlagShowFn(data) {
      this.drawerCollectFlagShow = data;
    },
    handleClick(value) {
      // console.log(value, "thermometer_idsthermometer_ids");
      this.dialogVisible = true;
      this.fromdata.thermometer_ids = [value.thermometer_id * 1];
      this.fromdata.handler_result = "";
    },
    handleAcceptanceClick() {
      var param = {
        ...this.fromdata,
      };
      thermometermonitorabnormaldeal(param).then((res) => {
        if (res.code == 10000) {
          this.open2("success", "处理成功");
          this.dialogVisible = false;
          this.thermometermonitorObj();
        }
      });
    },
    open2(type, title) {
      this.$message({
        message: title,
        type: type,
      });
    },
  },
};
</script>
<style scoped lang="less">
.qualityMonitoringList {
  /* width: 100%; */
  background: #ffffff;
  padding: 10px 15px;
}
</style>